$unit-map: (
  "px": "px",
  "em": "em",
  "rem": "rem",
  "vh": "vh",
  "vw": "vw",
  "in": "in",
  "pt": "pt",
  "pc": "pc",
  "ex": "ex",
  "ch": "ch",
  "cm": "cm",
  "mm": "mm",
  "vmin": "vmin",
  "vmax": "vmax",
  "%": "%",
);

/// Sets width and height
/// @param {string|number} $width - The width of the element
/// @param {string|number} $height - The height of the element
@mixin dimension($width, $height, $unit: "px") {
  @if not map-has-key($unit-map, $unit) {
    @error "utils is not defined";
  }
  $w: none;
  $h: none;
  @if unitless($width) {
    $w: unquote($width + $unit);
  } @else {
    $w: $width;
  }
  @if unitless($height) {
    $h: unquote($height + $unit);
  } @else {
    $h: $height;
  }
  width: $w;
  height: $h;
}

@mixin cir($size, $unit: "px") {
  @include dimension($size, $size, $unit);
  border-radius: 50%;
}

@mixin circle($size, $bg, $unit: "px") {
  @include cir($size, $unit);
  background: $bg;
}

@mixin rect($width, $height, $bg, $bdrs: null, $unit: "px") {
  @include dimension($width, $height, $unit);
  background: $bg;
  border-radius: $bdrs;
}

/// set position and top/left/right/bottom
@mixin pos_tl($top, $left) {
  position: absolute;
  top: $top;
  left: $left;
}
@mixin pos_tr($top, $right) {
  position: absolute;
  top: $top;
  right: $right;
}
@mixin pos_bl($bottom, $left) {
  position: absolute;
  bottom: $bottom;
  left: $left;
}
@mixin pos_br($bottom, $right) {
  position: absolute;
  bottom: $bottom;
  right: $right;
}
@mixin left50 {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}
@mixin top50 {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
@mixin centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

@mixin pseudo($content: "") {
  &::before,
  &::after {
    content: $content;
    position: absolute;
    @content;
  }
}

@mixin pseudo_after($content: "") {
  &::after {
    content: $content;
    position: absolute;
    @content;
  }
}

@mixin pseudo_before($content: "") {
  &::before {
    content: $content;
    position: absolute;
    @content;
  }
}
